<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    //定义student组件
    const student =Vue.extend({
        template:"<div><h2>学生名字{{name}}</h2><h2>学生年龄{{age}}</h2></div>",
        data(){
            return{
                name:'楠籽',
                age:18
            }
        }
    })

    //定义school组件
    const school =Vue.extend({
        template:"<div><h2>学校名称{{name}}</h2><h2>学校地址{{address}}</h2><student></student></div>",
        data(){
            return{
                name:'山海经',
                address:"上海",
            }
        },
        //注册组件（局部）
        components: {
            student
        }
    })
    const hello=Vue.extend({
        template:"<h1>你好呀</h1>"
    })
    const app=Vue.extend({
        template:"<div><hello></hello><school></school></div>",
        components:{
            school,
            hello
        }
    })

    //创建vm
    new Vue({
        template:"<app></app>",
        el:'#root',
       //注册组件（局部）
        components:{
            app,
            school,
            hello
        }
    })
</script>
</html>